<template>
  <div class="aui-navbar__menu-all">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :index="item.id" :class="activeMenuIndex==item.id?'aui-navbar__menu_active':''" v-for="item in menusFilterData" :key="item.id" @click.native="moduleAllChangeHandle(item)" :label="item.name" :name="item.id">
        <span slot="label">
          <!-- <svg class="icon-svg " aria-hidden="true" style="font-size: 16px;margin-bottom: 2px;">
            <use :xlink:href="`#${item.icon}`"></use>
          </svg> -->
          {{ item.name }}
        </span>
      </el-tab-pane>
      <!--  -->
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    // 菜单参数
    data: {
      type: Array,
      default () {
        return []
      }
    },
    defaultModel: {
      type: String,
      default () {
        return ''
      }
    }
  },
  created () {
    this.activeName = this.defaultModel
  },
  data () {
    return {
      activeName: '',
      activeMenuIndex: ''
    }
  },
  computed: {
    // 计算菜单
    menusFilterData: function () {
      // 菜单转换
      let tempMenus = []
      // 遍历所有菜单
      this.data.forEach(item => {
        // 处理菜单数据
        if (item.showFlag) {
          tempMenus = tempMenus.concat(item)
        }
      })
      return tempMenus
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(this.activeName)
      let menuId = tab.$attrs.index
      this.data.forEach(e => {
        if (e.id === menuId) {
          this.$emit('click', e)
        }
      })
    }
  }
}
</script>

<style>
</style>
